<template>
  <div class="box">
    <h1 @click="() => $router.push('/imgDetail')">
      <SearchOutlined />
      搜素
    </h1>

    <div class="body">
      <div class="item" v-for="obj in classif" @click="goDetail(obj)">
        <div class="name">{{ obj.name }}</div>
        <div class="tag">{{ obj.tag }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { imgClassif360 } from '@/api/index'
import { useRouter } from 'vue-router'
import { SearchOutlined } from '@ant-design/icons-vue'
const $router = useRouter()
const classif: any = ref([])
const getClassiF = async () => {
  const result = await imgClassif360({
    c: 'WallPaper',
    a: 'getAllCategoriesV2',
    from: '360chrome',
  })
  classif.value = result.data
}
const goDetail = (obj: any) => {
  $router.push({
    path: '/imgDetail',
    query: {
      id: obj.id,
      order_num: obj.order_num,
    },
  })
}

onMounted(() => {
  getClassiF()
})
</script>

<script lang="ts">
export default {
  name: 'image360',
}
</script>

<style lang="scss" scoped>
.box {
  height: 100%;
  overflow-y: auto;

  h1 {
    margin: 0 auto;
    width: calc(100% - 20px);
    padding: 10px 0;
    border-radius: 10px;
    box-shadow: 1px 2px 2px 0px rgba(106, 108, 110, 0.5);
    cursor: pointer;
    padding-left: 20px;
    color: grey;
    box-sizing: border-box;
    border: 1px solid white;
    transition: all 0.54s;

    &:hover {
      color: var(--themeColor);
      border-color: rgba(128, 128, 128, 0.511);
    }
  }

  .body {
    padding: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;

    .item {
      height: 100px;
      background: url('@/assets/images/bg.jpg') no-repeat;
      background-size: 100% 100%;
      cursor: pointer;
      border-radius: 5px;
      color: var(--themeColor);

      .name {
        font-weight: bold;
        text-align: center;
        font-size: 20px;
        padding: 10px;
        font-weight: bold;
      }

      .tag {
        padding: 0 10px;
      }

      &:hover {
        color: orangered;
        box-shadow: 2px 0 5px 1px orangered;
      }
    }
  }
}
</style>
